<template>
  <el-dialog v-model="dialogVisible" :title="pile.pileNumber+'#桩基质检及收方资料.xlsx'" >
    <ul>
      <li><a :href="'http://192.168.1.245:8080/pileData/createPouringTable?id='+pile.id">全站仪放样记录</a></li>
      <li><a :href="'http://192.168.1.245:8080/pileData/createPouringTable?id='+pile.id">灌注桩成孔施工记录 </a></li>
      <li><a :href="'http://192.168.1.245:8080/pileData/createPouringTable?id='+pile.id">现场收方单</a></li>
      <li><a :href="'http://192.168.1.245:8080/pileData/createPouringTable?id='+pile.id">灌注桩水下混凝土浇筑记录.xlsx</a></li>
      <li><a :href="'http://192.168.1.245:8080/pileData/createPouringTable?id='+pile.id" style="font-style: italic">下载资料</a></li>
    </ul>

  </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { saveAs } from 'file-saver';
import { ref } from 'vue';
import { downloadPouring } from "@/apis/api_pile.js";

const dialogVisible = ref(false);
const pile = ref({
  id: "",
  pileNumber: ""
});

// 打开弹窗
const openDownDialog = (row) => {
  dialogVisible.value = true;
  pile.value.id = row.id;
  pile.value.pileNumber = row.pileNumber;
  console.log("要生成资料的数据", pile);
};

// 暴露出去供父组件使用
defineExpose({ openDownDialog });

const downLoadPouringtable = async () => {
  try {
    const response = await downloadPouring(pile.value.id);
    // 检查响应状态码
    if (response.status!== 200) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    const contentDisposition = response.headers['content-disposition'];
    let filename = 'downloaded_file.xlsx';
    if (contentDisposition) {
      const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (filenameMatch!= null && filenameMatch[1]) {
        filename = filenameMatch[1].replace(/['"]/g, '');
      }
    }
    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    saveAs(blob, filename);
  } catch (error) {
    console.error('下载文件时出错:', error);
  }
};
</script>

<style scoped>
/* 可根据需要添加自定义样式 */
ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

</style>